import {MenuProps} from "antd";
import {createSlice, PayloadAction} from "@reduxjs/toolkit";
import React from "react";
import {
    BarsOutlined,
    MessageOutlined,
    RotateLeftOutlined,
    TeamOutlined,
    UserAddOutlined,
    UsergroupAddOutlined,
    UserSwitchOutlined
} from "@ant-design/icons";
import {RootState} from "./index";

type MenuItem = Required<MenuProps>['items'][number];

const getItem = (
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem => {
    return {
        label,
        key,
        icon,
        children,
    } as MenuItem;
}

const actionChildren = [
    getItem('导出聊天记录', '/exportExcel', <RotateLeftOutlined/>),
    getItem('添加好友', '/addFriends', <UserAddOutlined/>),
    getItem('加入群聊', '/addGroup', <UsergroupAddOutlined/>),
];

const menuList = [
    getItem('好友列表', '/friends', <UserSwitchOutlined/>),
    getItem('群组', '/group', <TeamOutlined/>),
    getItem('消息', '/message', <MessageOutlined/>),
    getItem('操作', '/action', <BarsOutlined/>, actionChildren)
];

// 以此方便createSlice函数推导类型
const initialState: Array<MenuItem> = menuList;

export const menuSlice = createSlice({
        name: "menu",
        initialState,
        reducers: {
            // 更新动作
            updateMenu(state, action: PayloadAction<Array<MenuItem>>) {
                return state = action.payload;
            },
        }
    }
)

// 导出action动作
export const {updateMenu} = menuSlice.actions;
// 导出当前切片名字
export const menuData = (state: RootState) => state.menu;

export default menuSlice.reducer;
